<template>
  <div style="display: flex; justify-content: center; flex-direction: column; align-items: center;">

    <!--图片区-->
    <div
        style="width: 70%;min-height: 69vh;display: flex;justify-content: center; align-items: center; position: relative;"
        :style="{backgroundColor: originImage?'':'#f2f5f9'}">

      <span v-if="!originImage" style="color: #c5c5c5; cursor: default;">请上传人像图片</span>
      <el-image v-if="originImage" :src="originImage" fit="contain"
                style="width: 100%;height: 100%; position: absolute;"></el-image>
      <el-image v-if="animeImage" :src="'data:image/png;base64,'+animeImage" fit="contain"
                style="width: 100%;height: 100%; position: absolute;"
                :style="{ opacity: percent/100  }"></el-image>
    </div>

    <!--滑块-->
    <el-slider v-model="percent" style="width: 70%;" :show-tooltip="showTooltip" :format-tooltip="()=>'拖动试试'"
               @change="sliderChange"></el-slider>

    <!--按钮区-->
    <el-card style="width: 70%;">
      <el-upload
          style="display: inline-block;"
          class="avatar-uploader"
          name="multipartFile"
          action="http://localhost:8080/user/upload/avatar"
          :show-file-list="false"
          :on-success="handleAvatarSuccess">
        <el-button type="primary">上传图片</el-button>
      </el-upload>
      <el-button type="success" @click="toAnime" style="margin-left: 10px">动漫化</el-button>
      <el-button type="info" @click="clean">清空</el-button>
    </el-card>

  </div>
</template>

<script>
export default {
  data() {
    return {
      //原图
      originImage: '',
      //动漫化后的图片的base64编码
      animeImage: '',
      //滑块的百分比
      percent: 0,
      animationFrame: null,
      //是否显示滑块的提示
      showTooltip: true,
    }
  },
  methods: {
    //头像上传成功后操作
    handleAvatarSuccess(res) {
      if (res.code === 200) {
        this.percent=0
        this.originImage = res.data
      } else {
        this.$message.error(res.message)
      }
    },
    //拖动滑块触发的函数，拖动滑块后不再显示提示
    sliderChange() {
      if (this.showTooltip) {
        this.showTooltip = false
      }
    },
    //进行动漫化
    toAnime() {
      this.$request.get('/ai/toAnime', {
        params: {
          path: this.originImage
        }
      }).then(res => {
        if (res.code === 200) {
          this.animeImage = res.data
          //得到动漫化图片后，滑块滑到右边的动画开始
          this.startTransition()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    //将percent的值在0.5秒内从0增加到100
    animate() {
      const elapsed = Date.now() - this.startTime;
      const progress = Math.min(elapsed / 500, 1); // 限制在0到1之间
      this.percent = progress * 100;

      if (progress < 1) {
        // 如果还没有到达100%，则继续下一帧
        this.animationFrame = requestAnimationFrame(this.animate);
      } else {
        // 否则，清除动画帧
        cancelAnimationFrame(this.animationFrame);
        this.animationFrame = null;
      }
    },
    //启动animate动画
    startTransition() {
      if (this.animationFrame) return; // 如果已经开始了，就不要再开始了

      this.startTime = Date.now();
      this.animate(); // 开始动画
    },
    //清空
    clean() {
      this.originImage = ''
      this.animeImage = ''
      this.percent = 0
    },
  },
  beforeDestroy() {
    // 在组件销毁前清除动画帧
    if (this.animationFrame) {
      cancelAnimationFrame(this.animationFrame);
      this.animationFrame = null;
    }
  },
}
</script>

<style scoped>

</style>
